<form id="detail-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="panel panel-default panel-intro">
        <div class="panel-heading">
            <h3 class="panel-title">订单详情</h3>
        </div>
        <div class="panel-body">
            <!-- 订单基本信息 -->
            <div class="panel panel-default">
                <div class="panel-body" style="padding: 15px;">
                    <div class="row">
                        <div class="col-md-6">
                            <div style="margin-bottom: 10px;">
                                <strong style="font-size: 16px;">订单号：{$row.order_no}</strong>
                            </div>
                            <div style="margin-bottom: 10px;">
                                <span style="font-size: 14px;">订单类型：{$row.attribute_type_text}</span>
                            </div>
                            <div style="margin-bottom: 10px;">
                                <span style="font-size: 14px;">订单状态：{$row.order_status_text}</span>
                            </div>
                            <div>
                                <span style="font-size: 14px;">订单备注：{$row.remark}</span>
                            </div>
                        </div>
                        <div class="col-md-6 text-right">
                            <div style="font-size: 14px;">
                                下单时间：{$row.createtime|date="Y-m-d H:i:s",###}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 订单进度 -->
            <div class="panel panel-default">
                <div class="panel-heading" style="background-color: #f5f5f5;">
                    <h4 class="panel-title">订单进度</h4>
                </div>
                <div class="panel-body" style="padding: 20px;">
                    <div class="row">
                        <div class="col-md-12">
                            <div style="display: flex; align-items: center; justify-content: space-between; position: relative;">
                                <!-- 进度线 -->
                                <div style="position: absolute; top: 15px; left: 0; right: 0; height: 2px; background-color: #ddd; z-index: 1;"></div>
                                {if condition="$row.order_status >= 0"}
                                <div style="position: absolute; top: 15px; left: 0; width: {if condition="$row.order_status == 0"}25%{elseif condition="$row.order_status == 1"/}50%{elseif condition="$row.order_status == 2"/}75%{elseif condition="$row.order_status >= 3"/}100%{/if}; height: 2px; background-color: #5bc0de; z-index: 2;"></div>
                                {/if}
                                
                                <!-- 进度节点 -->
                                <!-- 下单时间节点 -->
                                <div style="text-align: center; z-index: 3; position: relative;">
                                    <div style="width: 30px; height: 30px; border-radius: 50%; background-color: #5bc0de; color: white; display: flex; align-items: center; justify-content: center; margin: 0 auto;">✓</div>
                                    <div style="margin-top: 10px; font-size: 12px; color: #5bc0de;">下单时间</div>
                                    <div style="margin-top: 5px; font-size: 11px; color: #666;">{$row.createtime|date="Y-m-d H:i:s",###}</div>
                                </div>
                                
                                <!-- 待付款节点 -->
                                <div style="text-align: center; z-index: 3; position: relative;">
                                    {if condition="$row.order_status == 0"}
                                    <div style="width: 30px; height: 30px; border-radius: 50%; background-color: #f39c12; color: white; display: flex; align-items: center; justify-content: center; margin: 0 auto;">●</div>
                                    <div style="margin-top: 10px; font-size: 12px; color: #f39c12;">待付款</div>
                                    {elseif condition="$row.order_status > 0"/}
                                    <div style="width: 30px; height: 30px; border-radius: 50%; background-color: #5bc0de; color: white; display: flex; align-items: center; justify-content: center; margin: 0 auto;">✓</div>
                                    <div style="margin-top: 10px; font-size: 12px; color: #5bc0de;">已付款</div>
                                    {else/}
                                    <div style="width: 30px; height: 30px; border-radius: 50%; background-color: #ddd; color: #999; display: flex; align-items: center; justify-content: center; margin: 0 auto;">2</div>
                                    <div style="margin-top: 10px; font-size: 12px; color: #999;">待付款</div>
                                    {/if}
                                </div>
                                
                                <!-- 待发货节点 -->
                                <div style="text-align: center; z-index: 3; position: relative;">
                                    {if condition="$row.order_status == 1"}
                                    <div style="width: 30px; height: 30px; border-radius: 50%; background-color: #f39c12; color: white; display: flex; align-items: center; justify-content: center; margin: 0 auto;">●</div>
                                    <div style="margin-top: 10px; font-size: 12px; color: #f39c12;">待发货</div>
                                    {elseif condition="$row.order_status > 1"/}
                                    <div style="width: 30px; height: 30px; border-radius: 50%; background-color: #5bc0de; color: white; display: flex; align-items: center; justify-content: center; margin: 0 auto;">✓</div>
                                    <div style="margin-top: 10px; font-size: 12px; color: #5bc0de;">已发货</div>
                                    {else/}
                                    <div style="width: 30px; height: 30px; border-radius: 50%; background-color: #ddd; color: #999; display: flex; align-items: center; justify-content: center; margin: 0 auto;">3</div>
                                    <div style="margin-top: 10px; font-size: 12px; color: #999;">待发货</div>
                                    {/if}
                                </div>
                                
                                <!-- 已完成节点 -->
                                <div style="text-align: center; z-index: 3; position: relative;">
                                    {if condition="$row.order_status == 2"}
                                    <div style="width: 30px; height: 30px; border-radius: 50%; background-color: #f39c12; color: white; display: flex; align-items: center; justify-content: center; margin: 0 auto;">●</div>
                                    <div style="margin-top: 10px; font-size: 12px; color: #f39c12;">待收货</div>
                                    {elseif condition="$row.order_status >= 3"/}
                                    <div style="width: 30px; height: 30px; border-radius: 50%; background-color: #27ae60; color: white; display: flex; align-items: center; justify-content: center; margin: 0 auto;">✓</div>
                                    <div style="margin-top: 10px; font-size: 12px; color: #27ae60;">已完成</div>
                                    {else/}
                                    <div style="width: 30px; height: 30px; border-radius: 50%; background-color: #ddd; color: #999; display: flex; align-items: center; justify-content: center; margin: 0 auto;">4</div>
                                    <div style="margin-top: 10px; font-size: 12px; color: #999;">已完成</div>
                                    {/if}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 三列信息布局 -->
            <div class="row" style="border: 1px solid #ddd; margin: 0; padding: 0;">
                <!-- 下单人信息 -->
                <div class="col-md-4" style="border-right: 1px solid #ddd; padding: 15px;">
                    <h5 style="margin-bottom: 15px; font-weight: bold;">下单人信息</h5>
                    <div style="margin-bottom: 8px;">下单人ID：{$row.user.id|default='Wx462626260'}</div>
                    <div style="margin-bottom: 8px;">下单人手机号：{$row.user.mobile|default='13800138000'}</div>
                    <div>下单时间：{$row.createtime|date="Y-m-d H:i:s",###}</div>
                </div>
                
                <!-- 收货人信息 -->
                <div class="col-md-4" style="border-right: 1px solid #ddd; padding: 15px;">
                    <h5 style="margin-bottom: 15px; font-weight: bold;">收货人信息</h5>
                    <div style="margin-bottom: 8px;">收货人：{$row.userAddress.name}</div>
                    <div style="margin-bottom: 8px;">收货人手机：{$row.userAddress.mobile}</div>
                    <div>收货地址：{$row.userAddress.province}{$row.userAddress.city}{$row.userAddress.district}{$row.userAddress.address}</div>
                </div>
                
                <!-- 支付信息 -->
                <div class="col-md-4" style="padding: 15px;">
                    <h5 style="margin-bottom: 15px; font-weight: bold;">支付信息</h5>
                    <div style="margin-bottom: 8px;">订单总额：￥{$row.total_amount}</div>
                    <div>支付方式：{$row.pay_type_text}</div>
                </div>
            </div>
            
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">订单商品信息 &nbsp;&nbsp; 商家名称：{$row.orderItems.0.product.merchant_name|default='未知商家'}</h4>
                </div>
                <div class="panel-body">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th width="60">序号</th>
                                <th width="300">商品</th>
                                <th width="80">购买数量</th>
                                <th width="100">单价</th>
                                <th width="100">支付方式</th>
                                <th width="100">商品总额</th>
                                <th width="100">商家应收</th>
                            </tr>
                        </thead>
                        <tbody>
                            {volist name="row.orderItems" id="item" key="k"}
                            <tr>
                                <td class="text-center">{$k}</td>
                                <td>
                                    <div class="media">
                                        <div class="media-left">
                                            {if condition="isset($item.product.image_url) && $item.product.image_url"}
                                            <img src="{$item.product.image_url}" style="width: 80px; height: 80px;" class="img-thumbnail media-object">
                                            {else/}
                                            <img src="/assets/img/default-product.svg" style="width: 80px; height: 80px;" class="img-thumbnail media-object">
                                            {/if}
                                        </div>
                                        <div class="media-body" style="padding-left: 15px;">
                                            <div style="font-weight: bold; margin-bottom: 5px;">
                                                {$item.product_name|mb_substr=0,30,'utf-8'}...
                                            </div>
                                            <div style="color: #666; font-size: 12px; margin-bottom: 3px;">
                                                ID: {$item.product_id}
                                            </div>
                                            <div style="color: #666; font-size: 12px;">
                                                {$item.sku_name|default='默认规格'}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center" style="vertical-align: middle;">
                                    <strong>{$item.quantity}</strong>
                                </td>
                                <td class="text-center" style="vertical-align: middle;">
                                    <span style="color: #e74c3c; font-weight: bold;">{$item.price}元</span>
                                </td>
                                <td class="text-center" style="vertical-align: middle;">
                                    {$row.pay_type_text}
                                </td>
                                <td class="text-center" style="vertical-align: middle;">
                                    <span style="color: #e74c3c; font-weight: bold;">{$item.total_amount}元</span>
                                </td>
                                <td class="text-center" style="vertical-align: middle;">
                                    <span style="color: #e74c3c; font-weight: bold;">{$item.total_amount}元</span>
                                </td>
                            </tr>
                            {/volist}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</form>